<template>
    <div class="list">
        <div class="list-group">
            <div class="card list-group-item list-group-item-action" v-for="article in articles" :key="article.id">
                <div class="card-body">
                    <div class="photo">
                        <img :src="article.photoPath" alt="封面图片" />
                    </div>
                    <div class="text">
                        <div class="title">{{ article.title }}</div>
                        <div class="desc">{{ article.summary }}</div>
                        <div class="foot">
                            <div class="time">创建时间：{{ article.createTime }}</div>
                            <div class="time" v-if="article.updateTime != null">最近更新：{{ article.updateTime }}</div>
                            <div class="operations">
                                <router-link type="button" class="btn btn-info btn-small" to="/" style="color: white"
                                    >编辑</router-link
                                >
                                <router-link type="button" class="btn btn-info btn-small" to="/" style="color: white"
                                    >查看</router-link
                                >
                                <a
                                    type="button"
                                    id="del_link"
                                    class="btn btn-info btn-small"
                                    style="color: white"
                                    onclick="saveCurUrl(event)"
                                    >删除</a
                                >
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <router-link to="/add">添加新文章</router-link>
        </div>
    </div>
</template>

<script>
import { onMounted, ref } from "vue";
import $ from "jquery";

export default {
    setup(props) {
        let type = props.type;
        let articles = ref([]);
        onMounted(() => {
            $.ajax({
                url: "/notes/" + type,
                success(resp) {
                    articles.value = resp.data; // 更新响应式变量的值
                },
            });
        });

        return {
            articles,
        };
    },
};
</script>

<style scoped>
.list {
    width: 80%;
    display: block;
    margin-left: 30px;
}
.card {
    padding: 0px;
    margin-bottom: 5px;
}
.card:hover {
    box-shadow: 0 1px 5px grey;
    /*cursor: pointer;*/
}
.card-body {
    display: flex;
    height: 150px;
}
.photo {
    height: 118px;
    width: 200px;
}
.text {
    height: 150px;
    width: 90%;
    margin-left: 20px;
}
.title {
    font-weight: 800;
    font-size: 25px;
    height: 33%;
}
.desc {
    font-size: 16px;
    color: grey;
    font-weight: 400;
    height: 33%;
    white-space: wrap;
    max-height: 2em; /* 设置最大高度 */
    line-height: 1; /* 设置行高 */
    overflow: hidden;
    text-overflow: ellipsis;
}
.time {
    font-size: 14px;
    color: lightgray;
    display: flex;
    align-items: flex-end;
}
.operations {
    text-align: right;
}
a {
    text-decoration: none;
}

.foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
img {
    max-width: 100%;
    height: auto;
    max-height: 100%;
}
</style>
